<template>
  <div class="warning">
    <div class="app-name">警告中心</div>
    <div class="filter">
      <el-form :model="form" inline>
        <el-form-item label="警告内容">
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="警告状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="告警级别">
          <el-select v-model="form.level" placeholder="请选择">
            <el-option v-for="(item, index) in levels" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="静默状态">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option v-for="(item, index) in states" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button type="info" @click='handleReset'>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="hanlder">
      <!-- <el-button text :icon="RefreshLeft">刷新</el-button> -->
    </div>
    <el-table :data="list">
      <el-table-column label="序号" type="index" width="100"></el-table-column>
      <el-table-column prop="hostName" width="250">
        <template #header>
          <Tooltip title='设备名称' content='设备名称 ：用户自定义的标识，便于快速识别设备（如“北京机房_交换机_01”）。'></Tooltip>
        </template>
        <template #default="{ row }">
          <el-button type="primary" text @click="$router.push('/warning/warningDetail')">{{ row.hostName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="设备ip/dns">
        <template #header>

          <Tooltip title='设备ip/dns' content='IP / DNS ：设备的网络地址及连接协议（如SNMP、Modbus），决定监控方式。'></Tooltip>
        </template>
        <template #default="scope">
          <span v-if="scope.row.ip">{{ scope.row.ip }}</span>
          <span v-else>{{ scope.row.dns }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="severity">
        <template #header>
          <Tooltip title='告警级别' content='告警级别 ：分CRITICAL（红色，立即处理）、MAJOR（橙色，2小时内）、WARNING（黄色，24小时内）。'></Tooltip>
        </template>
        <template #default="{ row }">
          <el-tag :type="getLevelTag(row.severity)">
            {{levels.find((item) => item.value == row.severity).label}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="" prop="name">
        <template #header>
          <Tooltip title='警告内容' content='告警内容 ：具体问题描述（如“设备离线”“CPU超载”）。'></Tooltip>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template #header>
          <Tooltip title='状态' content='状态 ：分为“已处理”和“未处理”，闭环跟踪问题解决进度。'></Tooltip>
        </template>
        <template #default="scope">
          <el-tag :type="scope.row.status ? 'success' : 'danger'">
            {{ scope.row.status ? "已处理" : "未处理" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="静默状态" prop="type">
        <template #header>
          <Tooltip title='静默状态' content='静默状态 ：临时屏蔽非关键告警（如维护期间），避免干扰，需设置有效期和原因。'></Tooltip>
        </template>
        <template #default="scope">
          <el-tag :type="scope.row.type === '1' ? 'success' : 'danger'">
            {{ scope.row.type === "1" ? "已开启" : "已关闭" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="告警时间" prop="clock">
        <template #header>
          <Tooltip title='告警时间' content='告警时间 ：精确到毫秒的事件记录，支持分析告警频率。'></Tooltip>
        </template>
        <template #default="{ row }">
          {{ getFormattedTime(Number(row.clock * 1000)) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button type="primary" text>标记</el-button>
          <el-button type="danger" text>删除</el-button>
          <el-button type="primary" text>静默</el-button>
          <el-button type="primary" text>消除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <Editor style="height:500px" mode='default' class='warning-text' v-model="warningText" /> -->
    <div class="pagination">
      <div class="allHanlde">
        <el-button type="primary">标记为已处理</el-button>
        <el-button type="info">标记为未处理</el-button>
        <el-button type="info">删除告警</el-button>
        <el-button type="info">告警静默</el-button>
        <el-button type="info">消除静默</el-button>
        <el-button type="info">消除告警</el-button>
        <el-button type="danger">一键清空</el-button>
      </div>
      <el-pagination background layout="total,sizes,prev, pager, next,jumper" :total="total"
        v-model:current-page="form.page" v-model:page-size="form.pageSize" @size-change="handleSizeChange"
        @current-change="handleSizeChange" />
    </div>
    <div class='warning-text'>
      <div v-html='renderedMarkdown'></div>
      <el-button type="primary" @click="handleOpen">查看更多</el-button>
    </div>
  </div>
</template>
<script setup>
import { RefreshLeft, QuestionFilled } from "@element-plus/icons-vue";
import { ref, reactive, computed } from "vue";
//api
import { getWarningList } from "@/api/warning";
import { getFormattedTime } from "@/utils/utils";
import Tooltip from './components/Tooltip.vue';
const total = ref(0);
const form = ref({
  name: "",
  status: "",
  page: 1,
  pageSize: 10,
});
const status = ref([
  {
    label: "正常",
    value: "1",
  },
  {
    label: "暂停",
    value: "0",
  },
]);
const states = ref([
  {
    label: "未静默",
    value: "1",
  },
  {
    label: "已静默",
    value: "0",
  },
]);
const pages = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
})
//重置
const handleReset = () => {
  form.value = {
    name: "",
    status: "",
    page: 1,
    pageSize: 10,
  };
  getList();
}

const warningText = `### ** 物联网设备监控名词解析提示**
      ** 提示 **：登录系统后，可通过“筛选”和“收藏”功能快速定位设备，优先处理CRITICAL告警，合理使用静默功能减少噪音。
`
// 基础Markdown转换函数
const renderedMarkdown = computed(() => {
  let html = warningText

  // 标题转换
  html = html.replace(/^# (.*$)/gm, '<h1>$1</h1>')
  html = html.replace(/^## (.*$)/gm, '<h2>$1</h2>')
  html = html.replace(/^### (.*$)/gm, '<h3>$1</h3>')

  // 粗体和斜体
  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>')

  // 无序列表
  html = html.replace(/^- (.*$)/gm, '<li>$1</li>')
  html = html.replace(/(<li>.*<\/li>)/g, '<ul>$1</ul>')

  // 链接
  html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')

  // 段落处理
  html = html.replace(/^(?!<[a-z])(.*$)/gm, '<p>$1</p>')

  return html
})

function handleOpen () {
  window.open('https://blog.csdn.net/dujiangdu123/article/details/147936181?utm_source=miniapp_weixin')
}

const list = ref([]);
const listAll = ref([])
//问题等级 0-未分类;1-信息;2-警告;3-平均;4-高;5-灾难;
const levels = ref([
  {
    label: "未分类",
    value: "0",
    tag: "info"
  },
  {
    label: "信息",
    value: "1",
    tag: "success"
  },
  {
    label: "警告",
    value: "2",
    tag: "warning"
  },
  {
    label: "平均",
    value: "3",
    tag: "success"
  },
  {
    label: "高",
    value: "4",
    tag: "danger"
  },
  {
    label: "灾难",
    value: "5",
    tag: "danger"
  },
]);
//获取等级tag
const getLevelTag = (level) => {
  return levels.value.find((item) => item.value == level)?.tag || '';
}
//获取列表
const getList = async () => {
  const res = await getWarningList(form.value);
  list.value = res.data.slice(0, 10)
  listAll.value = res.data
  pages.total = res.data.length
};
//分页
const handleSizeChange = () => {
  if (pages.page == 0) {
    list.value = listAll.value.slice(0, pages.pageSize)
  } else {
    list.value = listAll.value.slice((pages.page - 1) * pages.pageSize, pages.page * pages.pageSize)
  }
};
getList();
</script>
<style lang="scss" scoped>
.warning {
  display: flex;
  flex-direction: column;
  padding: 16px;
  height: calc(100vh - 100px);
  box-sizing: border-box;

  .filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    .el-form {
      .el-form-item {
        margin-bottom: 0;
      }

      .el-select,
      .el-input {
        width: 200px;
      }
    }
  }

  .hanlder {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: 32px;
  }

  .el-table {
    flex: 1;
  }

  .warning-text {
    padding: 20px 0;
    white-space: pre-line;
  }

  .pagination {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
  }
}
</style>